<script setup lang="ts">
import { ref, defineEmits } from "vue";
import { issueApp, getClusterList } from "@/api/vap/cluster";

const emit = defineEmits(["onSearchEnv"]);
const onSearchTable = () => {
  emit("onSearchEnv");
};
const clusterList = ref([]);

const formArgus = ref({
  appName: "",
  alias: "",
  icon: "",
  linkPath: "",
  execPath: "",
  appParams: "",
  workSpace: "",
  isAdmin: false,
  isSingle: false,
  isPublic: true,
  clusterId: "0"
});

const dialogVisible = ref(false);

const showdialogForAdd = () => {
  getClusterList().then(res => {
    clusterList.value = res;
    formArgus.value = {
      appName: "",
      alias: "",
      icon: "",
      linkPath: "",
      execPath: "",
      appParams: "",
      workSpace: "",
      isAdmin: false,
      isSingle: false,
      isPublic: true,
      clusterId: res[0].id
    };
  });
  dialogVisible.value = true;
};

const clickSubmit = () => {
  issueApp(formArgus.value).then(() => {
    dialogVisible.value = false;
    onSearchTable();
  });
};
defineExpose({
  showdialogForAdd
});
</script>

<template>
  <el-dialog v-model="dialogVisible" title="添加集群">
    <el-form ref="elForm" :model="formArgus" label-width="100px">
      <el-form-item label="名称">
        <el-input v-model="formArgus.appName" show-word-limit clearable />
      </el-form-item>
      <el-form-item label="别名">
        <el-input v-model="formArgus.alias" show-word-limit clearable />
      </el-form-item>
      <el-form-item label="执行路径">
        <el-input v-model="formArgus.execPath" show-word-limit clearable />
      </el-form-item>
      <el-form-item label="启动参数">
        <el-input v-model="formArgus.appParams" show-word-limit clearable />
      </el-form-item>
      <el-form-item label="工作空间">
        <el-input v-model="formArgus.workSpace" show-word-limit clearable />
      </el-form-item>
      <el-form-item label="启动权限">
        <el-radio-group v-model="formArgus.isAdmin">
          <el-radio :label="true">管理员权限</el-radio>
          <el-radio :label="false">一般权限</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="运行模式">
        <el-radio-group v-model="formArgus.isSingle">
          <el-radio :label="true">单例模式</el-radio>
          <el-radio :label="false">共享模式</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="公开范围">
        <el-radio-group v-model="formArgus.isPublic">
          <el-radio :label="true">全局</el-radio>
          <el-radio :label="false" :disabled="true">非全局</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="归属集群">
        <el-select v-model="formArgus.clusterId">
          <el-option
            v-for="item in clusterList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="clickSubmit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped></style>
